<template>
  <div class="index-swiper" v-if="swiperList.length">
    <swiper class="box" :current="swiperIndex" @change="onSwiperChange" circular autoplay :interval="2000"
      :duration="500">
      <swiper-item v-for="(itm, idx) in swiperList" :key="idx" @click="toDetail(itm)">
        <image class="item" :src="itm.image"></image>
      </swiper-item>
    </swiper>
    <cover-view class="dots" v-if="swiperList.length > 1">
      <cover-view v-for="(_, idx) in swiperList" :class="`${swiperIndex === idx && 'active'} dot`"
        :key="idx"></cover-view>
    </cover-view>
    <cover-view class="search-ipt" @click="toSerch">
      <cover-view>搜索车辆，如：海豹</cover-view>
      <cover-image class="search-icon" :src="getImageSrc('static/icons/search.png')"></cover-image>
    </cover-view>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import service from "@/path/service"
import { toDetail } from "../../data"
import { router } from "@/path/router";
import { getImageSrc } from '@/path/until';
const swiperIndex = ref(0)
const swiperList = ref([])
function onSwiperChange(ev) {
  swiperIndex.value = ev.detail.current
}
onMounted(() => {
  service.get("api/ycg/home/banner", { pageType: 0 }).then((res) => {
    swiperList.value = res
  })
})
function toSerch() {
  router.switch({ url: "/pages/tabbar/buy/index" })
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
